<template>
  <div class="school_infs">
    <Card>
      <p slot="title">
        <Icon type="navicon-round"></Icon>
        幼儿请假查询
      </p>
      <Row type="flex" justify="space-between">
        <div>
          幼儿：<Input v-model="searchparam.studentName" @on-change="queryFn" placeholder="幼儿姓名关键字"
                    style="width: 100px;margin-right: 4px;"/>
          <div class="db_inline">
            请假类型：
            <Select v-model="searchparam.leaveType" style="width:80px" @on-change="queryFn">
              <Option v-for="item in leaveList" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
            班级：
            <Select v-model="searchparam.clazzId" label-in-value @on-change="queryFn" style="width:150px">
              <Option v-for="item in clazzList" :value="item.id" :key="item.id">{{ item.gradeName }}-{{ item.name }}
              </Option>
            </Select>
            申请时间：
            <DatePicker type="date" placeholder="开始时间" v-model="searchparam.bTime" @on-change="searchparam.bTime=$event"
                        style="width: 110px"></DatePicker>
            至
            <DatePicker type="date" placeholder="结束时间" v-model="searchparam.eTime" @on-change="searchparam.eTime=$event"
                        style="width: 110px"></DatePicker>
          </div>
          <div class="db_inline">
						<span @click="queryFn">
              			<Button type="info"><Icon type="search"></Icon>搜索</Button>
        			</span>
            <span @click="restFn">
              			<Button type="ghost"><Icon type="refresh"></Icon>刷新</Button>
        			</span>
            <Button @click="exportFn" type="info">
              <Icon type="navicon" size="20"></Icon>
              <span>全部导出</span>
            </Button>
          </div>
        </div>
      </Row>
      <Row class="margin-top-10">
        <Table :height='tableHeight' ref="backgroundTable" :columns="dataColumns" :data="dataTable"></Table>
      </Row>
      <Row type="flex" justify="end" class="footer">
        <div class="margin-top-10">
          <Page :total="searchparam.total" :current="searchparam.current" :page-size="searchparam.size"
                @on-change="pageChange" show-elevator></Page>
        </div>
      </Row>
    </Card>
  </div>
</template>

<script>
import API from "@/api/api";
import VmBtable from "@/components/vm/vm-btable";
import vueUpload from "@/components/views/upload/Upload";
import Cookie from "js-cookie"

export default {
  name: "Background",
  components: {
    VmBtable,
    vueUpload,
  },
  data() {
    return {
      cutHeight: 280,
      tableHeight: 640,
      leaveList: [
        {id: '事假', name: '事假'},
        {
          id: '病假', name: '病假'
        }],
      loginType: Cookie.getJSON('loginType'),
      searchparam: {
        current: 1,
        size: 20,
        studentName: '',
        leaveType: '',
        bTime: '',
        eTime: '',
      },
      dataColumns: [
        {
          type: 'index',
          title: '序号',
          align: 'center',
          minWidth: 60
        },
        {
          title: '宝贝名字',
          key: 'studentName',
          minWidth: 160,
          align: 'center'
        },
        {
          title: '班级名称',
          key: 'clazzName',
          minWidth: 160,
          align: 'center'
        },
        {
          title: '请假类型',
          key: 'leaveType',
          align: 'center',
          minWidth: 100
        },
        {
          title: '开始时间',
          key: 'startTime',
          minWidth: 150,
          align: 'center',
        },
        {
          title: '结束时间',
          key: 'endTime',
          minWidth: 150,
          align: 'center',
        },
        {
          title: '申请人',
          key: 'whoApply',
          minWidth: 150,
          align: 'center',
        },
        {
          title: '申请时间 ',
          key: 'createTime',
          minWidth: 150,
          align: 'center',
          sortable: true,
          sortType: 'desc'
        },
        {
          title: '请假原因',
          key: 'reason',
          minWidth: 150,
          align: 'center',
        },
      ],
      dataTable: [],
      clazzList: []
    }
  },
  methods: {
    exportFn() {
      this.$Modal.confirm({
        title: '提示',
        content: '是否导出全部学生请假报告？',
        onOk: () => {
          API.fetchStuLeaveexport(this.searchparam);
        },
        onCancel: () => {

        }
      })
    },
    queryFn() {
      API.fetchStuLeave(this.searchparam).then(resp => {
        this.dataTable = resp.data.records;
        this.searchparam.total = resp.data.total;
        this.searchparam.current = resp.data.current;
      })
    }
    ,
    pageChange(val) {
      this.searchparam.current = val;
      this.queryFn();
    }
    ,
    restFn() {
      this.searchparam.studentName = '';
      this.searchparam.bTime = '';
      this.searchparam.eTime = '';
      this.searchparam.clazzId = '';
      this.searchparam.leaveType = '';
      this.searchparam.current = 1;
      this.queryFn();
    }
    ,
    fetchStuLeave() {
      API.fetchStuLeave().then(resp => {
        this.dataTable = resp.data.records;
      })
    }
    ,
    setHeight() {
      this.tableHeight = window.innerHeight - this.$refs.backgroundTable.$el.offsetTop - this.cutHeight;
    },
    fetchKindergartenClazz() {
      API.fetchKindergartenClazz().then(resp => {
        this.clazzList = resp.data;
      })
    },
  }
  ,
  mounted() {
    this.queryFn();
    this.setHeight();
    this.fetchKindergartenClazz();
  }
}
</script>

<style scoped>

</style>
